.wrapper {
  height: calc(100vh - var(--welcome-nav-height));
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(
    to bottom,
    var(--welcome-bg-start) 0%,
    var(--welcome-bg-end) 100%
  );
  margin-bottom: var(--welcome-nav-height);
  > header {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 66px;
    color: #d4d4ee;
    > svg {
      width: 64px;
      height: 69px;
    }
  }
  > main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 16px 16px var(--welcome-nav-gap);
  }
  > footer {
    flex-shrink: 0;
  }
}

.slide_fade_enter_active,
.slide_fade_leave_active {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all var(--transition-duration) ease-out;
}

.slide_fade_enter_from {
  transform: translateX(100vw);
}
.slide_fade_leave_to {
  transform: translateX(-100vw);
}
